<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-form-item prop="province" label="省份" label-width="70px">
          <el-select
            v-model="ResultObj.province"
            placeholder="请选择省份"
            @change="selectProvince($event)"
          >
            <el-option
              v-for="item in provinces"
              :key="item.ID"
              :value="item.ID"
              :label="item.AddName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="city" label="城市">
          <el-select
            v-model="ResultObj.city"
            placeholder="请选择城市"
            @change="selectCity($event)"
          >
            <el-option
              v-for="item in citys"
              :key="item.ID"
              :value="item.ID"
              :label="item.AddName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="region" label="地区">
          <el-select
            v-model="ResultObj.region"
            placeholder="请选择地区"
            @change="selectResult"
          >
            <el-option
              v-for="item in areas"
              :key="item.ID"
              :value="item.AddName"
              :label="item.AddName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import address from "../../../assets/JSON/address";
export default {
  name: "AddressChoose",
  props: {
    areaObject: {
      type: Object,
    },
  },
  data() {
    return {
      provinces: [],
      citys: [],
      areas: [],
      obj:{
        province:'',
        city:'',
        region:''
      }
    };
  },
  computed: {
    ResultObj:function(){
      if(this.areaObject){
        return this.areaObject;
      }else{
        return this.obj
      }
    },
  },
  mounted() {
    this.provinces = address.slice(0, 31); //截取31个省级数据
  },
  methods: {
    closeEvent(){
      this.ResultObj.province = '';
      this.ResultObj.city = '';
      this.ResultObj.region = '';
      this.$emit("fatherMethods", this.ResultObj);
    },
    selectProvince(num) {
      this.ResultObj.city = '';
      this.ResultObj.region = ''
      this.citys = [];
      this.areas = [];
      this.ResultObj.province = this.provinces[num - 1].AddName;
      address.map((list) => {
        if (list.TopID === num) {
          this.citys.push(list);
        }
      });
    },
    selectCity(num) {
      this.areas = [];
      this.ResultObj.city = address[num - 1].AddName;
      address.map((list) => {
        if (list.TopID === num) {
          this.areas.push(list);
        }
      });
    },
    selectResult() {
      this.$emit("fatherMethods", this.ResultObj);
    },
    cleanForm(){
      this.ResultObj.province = '';
      this.ResultObj.city = '';
      this.ResultObj.region = '';
    }
  },
};
</script>

<style>
</style>